<template>
  <div>
    <div v-for="(item, index) in labelRuleValue" :key="index">
      <el-col
        :span="12"
        v-if="
          (item.type == 'input' ||
            (item.type == 'input-images' &&
              ruleForm.data['page_' + Bitem.id] &&
              ruleForm.data['page_' + Bitem.id][item.name] &&
              isImg(ruleForm.data['page_' + Bitem.id][item.name]) ==
                'input')) &&
          formShow(Bitem.id, item.name)
        "
      >
        <text-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
          }"
          :disabledValue="true"
        ></text-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="item.type == 'select' && formShow(Bitem.id, item.name)"
      >
        <select-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
            content: item.options ? item.options : [],
          }"
          :disabledValue="true"
        ></select-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="item.type == 'switch' && formShow(Bitem.id, item.name)"
      >
        <single-check-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
          }"
          :disabledValue="true"
        ></single-check-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="item.type == 'radio' && formShow(Bitem.id, item.name)"
      >
        <radio-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
            content: item.options ? item.options : [],
          }"
          :disabledValue="true"
        ></radio-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="item.type == 'checkbox' && formShow(Bitem.id, item.name)"
      >
        <check-tag
          :value="
            ruleForm.data['page_' + Bitem.id] &&
            ruleForm.data['page_' + Bitem.id][item.name]
              ? ruleForm.data['page_' + Bitem.id][item.name].split(',')
              : []
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
            content: item.options ? item.options : [],
          }"
          :disabledValue="true"
        ></check-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="
          (item.type == 'date' || item.type == 'datetime') &&
          formShow(Bitem.id, item.name)
        "
      >
        <!-- <date-tag
        :value="
          ruleForm.data['page_' + Bitem.id]
            ? ruleForm.data['page_' + Bitem.id][item.name]
            : ''
        "
        :labelRuleValue="{
          title: item['title_' + $store.state.settings.langTail],
        }"
        :disabledValue="true"
        :dateType="item"
      ></date-tag> -->
        <text-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
          }"
          :disabledValue="true"
        ></text-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="
          (item.type == 'upload' ||
            item.type == 'identCards' ||
            (item.type == 'input-images' &&
              ruleForm.data['page_' + Bitem.id] &&
              ruleForm.data['page_' + Bitem.id][item.name] &&
              isImg(ruleForm.data['page_' + Bitem.id][item.name]) ==
                'image')) &&
          formShow(Bitem.id, item.name)
        "
      >
        <upload-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
          }"
          :disabledValue="true"
        ></upload-tag>
      </el-col>
      <el-col
        :span="12"
        v-if="item.type == 'video' && formShow(Bitem.id, item.name)"
      >
        <video-tag
          :value="
            ruleForm.data['page_' + Bitem.id]
              ? ruleForm.data['page_' + Bitem.id][item.name]
              : ''
          "
          :labelRuleValue="{
            title: item['title_' + $store.state.settings.langTail],
          }"
          :disabledValue="true"
        ></video-tag>
      </el-col>
    </div>
  </div>
</template>
<script>
import TextTag from "@/components/typeTag/TextTag";
import SelectTag from "@/components/typeTag/SelectTag";
import SingleCheckTag from "@/components/typeTag/SingleCheckTag";
import RadioTag from "@/components/typeTag/RadioTag";
import CheckTag from "@/components/typeTag/CheckTag";
import DateTag from "@/components/typeTag/DateTag";
import UploadTag from "@/components/typeTag/UploadTag";
import VideoTag from "@/components/typeTag/VideoTag";
export default {
  components: {
    TextTag,
    SelectTag,
    SingleCheckTag,
    RadioTag,
    CheckTag,
    DateTag,
    UploadTag,
    VideoTag,
  },
  props: {
    propValue: {
      type: String,
      default: "",
    },
    labelRuleValue: {
      //行容器里的 全部标签类型
      type: Array,
      default: function () {
        return [];
      },
    },
    disabledValue: {
      type: Boolean,
      default: false,
    },
    ruleForm: {
      //总页面
      type: Object,
      default: function () {
        return {};
      },
    },
    Bitem: {
      //当前页面id
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  methods: {
    // handleValue(val) {
    //   this.$emit("update:value", val);
    // },
    formShow(id, name) {
      if (!this.ruleForm.data["page_" + id]?.[name] == "") {
        return true;
      } else {
        return false;
      }
    },
    isImg(isUrl) {
      if (isUrl) {
        if (
          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i.test(
            isUrl
          )
        ) {
          return "image";
        } else {
          return "input";
        }
      } else {
        return false;
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
